<template>
    <el-row class="padd20">
        <el-col class="box box-pack-between btn">
            <span v-if="fileList.length!=0">{{`共${fileList.length}个`}}</span>
            <!-- <el-button class="reset-btn" @click="uploadFile">+上传文件</el-button> -->
            <!-- <div class="box box-align-center box">
                <el-progress v-if="showProgress" :percentage="progInt" style="width: 12.5rem;"></el-progress>
                <el-upload class="upload-demo" :data="str" accept=".ppt,.pptx,.mp4" :action="uploadfileurl" multiple
                    :show-file-list="false" :on-progress="progress" :on-success="success" :before-upload="beforeUpload">
                    <el-button size="small" type="primary" v-if="maxRole !='tr' && fileList.length!=0">点击上传</el-button>
                </el-upload>
            </div> -->

        </el-col>
        <el-col class="padd20">
            <ul v-if="fileList.length !=0">
                <li class="box box-pack-between list" v-for="(item,i) in fileList" :key="i">
                    <div class="box box-pack-start">
                        <div class="icon box box-align-center box-pack-center video" v-if="item.type == `mp4`">
                            <el-image src="/static/image/course/video.png" class="img"></el-image>
                        </div>
                        <div class="icon box box-align-center box-pack-center ppt"
                            v-if="item.type == `ppt`||item.type == `pptx`">
                            <el-image src="/static/image/course/ppt.png" class="img"></el-image>
                        </div>
                        <div class="icon box box-align-center box-pack-center" v-if="item.type == `pdf`">
                            <el-image src="/static/image/course/pdf.png" class="img"></el-image>
                        </div>
                        <div class="icon box box-align-center box-pack-center"
                            v-if="item.type == `doc`||item.type == `docx`">
                            <el-image src="/static/image/course/word.png" class="img"></el-image>
                        </div>
                        <div class="icon box box-align-center box-pack-center"
                            v-if="item.type == `jpeg`||item.type == `png`||item.type == `jpg`">
                            <el-image src="/static/image/course/img.png" class="img"></el-image>
                        </div>
                        <div class="icon box box-align-center box-pack-center"
                            v-if="item.type == `xlsx`||item.type == `xls`">
                            <el-image src="/static/image/course/pdf.png" class="img"></el-image>
                        </div>
                        <div class="content box box-pack-center box-align-start box-tb">
                            <h3>{{item.fileName}}</h3>
                            <div class="info-user-time">
                                <span>{{item.createUser}}</span>
                                <span class="p-center">|</span>
                                <span>{{item.createTime}}</span>
                            </div>
                        </div>
                    </div>
                    <span class="show-btn cp" @click="showFile(item)">查看</span>
                </li>
            </ul>
            <!-- <el-empty description="暂无资源" v-else></el-empty> -->
            <el-empty description="暂无资源" v-else>
               <!-- <el-upload class="upload-demo" :data="str" accept=".ppt,.pptx,.mp4" :action="uploadfileurl" multiple
                    :show-file-list="false" :on-progress="progress" :on-success="success" :before-upload="beforeUpload">
                    <el-button size="small" type="primary" v-if="maxRole !='tr' && fileList.length!=0">点击上传</el-button>
                </el-upload> -->
            </el-empty>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: {
            jyzid: {
                type: Number
            }
        },
        data() {
            return {
                uploadfileurl: this.$url.baseURL + "/upload/uploadfile",
                showProgress: false,
                str: {
                    jyzid: this.$store.state.jyzid,
                    trid: this.$store.state.loginInfo.user.id,
                    fileid: ""
                },
                progInt: 0,
                fileList: [],
                maxRole: this.$store.state.maxRole,
            }
        },
        mounted() {
            this.listZyk();
        },
        methods: {
            listZyk() {
                this.$api.jyz.listZyk({
                    'jyzid': this.jyzid
                }).then(res => {
                    // console.log(res);
                    if (res.code == '0') {
                        this.fileList = res.list;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            //查看文件
            showFile(file) {
                if (file.type == 'mp4') {
                    window.open(file.url);
                } else {
                    window.open("https://view.officeapps.live.com/op/view.aspx?src=" + file.url);
                }
            },
            progress(event) {
                this.showProgress = true;
                this.progInt = parseInt(event.loaded / event.total * 100, 10);
            },
            success(response, file, fileList) {
                this.showProgress = false;

                this.str.fileid = response.body.data.fileid
                this.$ajax.post('/yxtjyzyk/uploadFileToZYk', this.str).then(res => {
                    // console.log(res);
                    if (res.state.code == '0') {
                        this.$message.success('上传成功');
                        this.listZyk()
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
                this.listZyk();
            },
            beforeUpload(file) {
                var imgSize = file.size / (1024 * 1024);
                if (imgSize > 1024) {
                    this.$message.warning(`当前文件${ parseInt(imgSize) }M,上传文件不能超过1G`)
                    return false
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    .list {
        height: 56px;
        margin-bottom: 26px;

        .icon {
            width: 56px;
            height: 100%;
            border-radius: 10px;

        }

        .ppt.icon {
            background-color: #FEE8E6;

            .img {
                width: 27px;
                height: 31px;
            }
        }

        .video.icon {
            background-color: #D9EBFF;

            .img {
                width: 33px;
                height: 20px;
            }
        }

        .content {
            padding-left: 20px;

            h3 {
                font-size: 18px;
            }

            .info-user-time {
                color: #5F6572;
                font-size: 14px;
            }

            .p-center {
                margin: 0 8px;
            }
        }

        .show-btn {
            width: 80px;
            height: 32px;
            line-height: 32px;
            background: #E8E9FE;
            border-radius: 16px;
            color: #626BF1;
        }
    }
</style>
